<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册</title>
    <link rel="stylesheet" href="//dev.dcloud.net.cn/mui/dist/css/mui.min.css">
    <style>
        .mui-content {
            padding: 20px;
        }
        .mui-btn {
            margin-top: 20px;
        }
        .mui-card {
            margin-top: 20px;
            width: 50%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="mui-content">
        <!-- 登录卡片 -->
        <div class="mui-card" id="login" style="width:400px;">
            <div class="mui-card-header">登录</div>
            <div class="mui-card-content">
                <form action="login.php" method="post">
                    <div class="mui-input-group">
                        <div class="mui-input-row">
                            <label>用户名</label>
                            <input type="text" name="username" placeholder="请输入用户名" required>
                        </div>
                        <div class="mui-input-row">
                            <label>密码</label>
                            <input type="password" name="password" placeholder="请输入密码" required>
                        </div>
                    </div>
                    &emsp;<button type="submit" class="mui-btn mui-btn-primary">登录</button>
                </form>
            </div>
            <div class="mui-card-footer">
                <a href="#register" class="mui-btn mui-btn-link">还没有账号？注册</a>
            </div>
        </div>

        <!-- 注册卡片 -->
        <div class="mui-card" id="register" style="display:none;width:400px;">
            <div class="mui-card-header">注册</div>
            <div class="mui-card-content">
                <form action="register.php" method="post">
                    <div class="mui-input-group">
                        <div class="mui-input-row">
                            <label>用户名</label>
                            <input type="text" name="username" placeholder="请输入用户名" required>
                        </div>
                        <div class="mui-input-row">
                            <label>密码</label>
                            <input type="password" name="password" placeholder="请输入密码" required>
                        </div>
                        <div class="mui-input-row">
                            <label>确认密码</label>
                            <input type="password" name="confirm_password" placeholder="确认密码" required>
                        </div>
                    </div>
                    &emsp;<button type="submit" class="mui-btn mui-btn-primary">注册</button>
                </form>
            </div>
            <div class="mui-card-footer">
                <a href="#login" class="mui-btn mui-btn-link">已有账号？登录</a>
            </div>
        </div>
    </div>

    <script src="//dev.dcloud.net.cn/mui/dist/js/mui.min.js"></script>
    <script>
        mui.init();

        // 切换登录和注册表单
        document.querySelectorAll('.mui-card-footer a').forEach(function (link) {
            link.addEventListener('click', function (event) {
                event.preventDefault();
                document.querySelectorAll('.mui-card').forEach(function (card) {
                    card.style.display = 'none';
                });
                var targetId = this.getAttribute('href').substring(1);
                document.getElementById(targetId).style.display = 'block';
            });
        });
    </script>
</body>
</html>
